<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 角色列表 -->
    <el-card>
      <el-button type="primary" style="margin-bottom:10px"
        @click="addRoleDialogVisable = true"
      >
        添加角色
      </el-button>
      <el-table :data="roleList" border stripe >
        <!-- 角色权限 -->
        <el-table-column type="expand">
          <template  v-slot="scope">
            <!-- 一级权限 -->
            <el-row type="flex" align="middle" class="first-border-bottom" v-for="item0 in scope.row.children" :key="item0.id">
              <el-col :span="4">
                <el-tag class="right-tag" closable 
                  @close="handleRightDelete(scope.row,item0.authName,item0.id)"
                >
                  {{item0.authName}}
                </el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <el-col :span="20" >
                <!-- 二级权限 -->
                <el-row type="flex" align="middle" class="border-bottom" v-for="item1 in item0.children" :key="item1.id">
                  <el-col :span="5" >
                    <el-tag class="right-tag" type="success" closable
                      @close="handleRightDelete(scope.row,item1.authName,item1.id)"
                    >
                      {{item1.authName}}
                    </el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <el-col :span="19" >
                    <!-- 三级权限 -->
                    <el-tag class="right-tag" type="warning" closable 
                      v-for="item2 in item1.children" :key="item2.id"
                      @close="handleRightDelete(scope.row,item2.authName,item2.id)"
                    >
                      {{item2.authName}}
                    </el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column label="角色" prop="roleName" min-width="20%">
        </el-table-column>
        <el-table-column label="角色描述" prop="roleDesc" min-width="20%">
        </el-table-column>
        <el-table-column label="操作" prop="level" width="400">
          <template v-slot="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit"
              @click="handleRoleEdit(scope.row)"
            >修改
            </el-button>
             <el-button size="mini" type="danger" icon="el-icon-delete"
              @click="handleRoleDelete(scope.row.id)"
             >删除</el-button>
            <el-button size="mini" type="warning" icon="el-icon-setting"
              @click="handleAllocRight(scope.row)"
            >分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加角色框 -->
    <el-dialog title="添加角色" :visible.sync="addRoleDialogVisable"  @closed="handleAddDialClose">
      <el-form :model="addRoleForm" :rules="roleRules" label-width="100px" ref="addRoleFormRef">
        <el-form-item label="角色名称" prop="roleName" required>
          <el-input v-model="addRoleForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="addRoleForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-button @click="addRoleDialogVisable = false">取消</el-button>
        <el-button type="primary" @click="confirmRoleAdd">确定</el-button>
      </template>
    </el-dialog>
    <!-- 编辑角色框 -->
    <el-dialog title="编辑角色" :visible.sync="editRoleDialogVisable" @closed="handleEditDialClose">
      <el-form :model="editRoleForm" :rules="roleRules" label-width="100px" ref="editRoleFormRef">
        <el-form-item label="角色名称" prop="roleName" required>
          <el-input v-model="editRoleForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="editRoleForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-button @click="editRoleDialogVisable = false">取消</el-button>
        <el-button type="primary" @click="confirmRoleEdit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import {
  getRoles,
  addRole,
  updateRole,
  deleteOneRight,
  deleteRole
} from '../../../api/role'
export default {
  created(){
    this.getRoleList()
  },
  data(){
    return{
      addRoleDialogVisable:false,
      editRoleDialogVisable:false,
      addRoleForm:{
        roleName:'',
        roleDesc:''
      },
      editRoleForm:{
        id:0,
        roleName:'',
        roleDesc:''
      },
      roleRules:{
        roleName:[
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
        ]
      },
      roleList:[]
    }
  },
  methods:{
    // 获取角色列表
    async getRoleList(){
      try {
        const res = await getRoles()
        this.roleList = res.data
      } catch (err) {
        console.log(err);
      }
    },
    // 取消某个权限
    handleRightDelete(role,authName,rightId){
      this.$confirm(`此操作将删除用户的 “${authName}” 权限, 是否继续?`,'删除权限',{
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type:'warning'
      }).then(async ()=>{
        try {
          // console.log(role.id,rightId);
          const res = await deleteOneRight(role.id,rightId)
          role.children = res.data
          this.$message({
            type:'success',
            message:res.meta.msg
          })
        } catch (err) {
          console.log(err);
        }
      }).catch(()=>{
        this.$message({
          type:'info',
          message:'已取消删除'
        })
      })
    },
    // 处理添加框和编辑框关闭
    handleAddDialClose(){
      this.$refs.addRoleFormRef.resetFields()
    },
    handleEditDialClose(){
      this.$refs.editRoleFormRef.resetFields()
    },
    // 添加角色
    async confirmRoleAdd(){
      try {
        const res = await addRole(this.addRoleForm)
        this.roleList = [{ //后台的roleId要处理一下
          id:res.data.roleId,
          roleName:res.data.roleName,
          roleDesc:res.data.roleDesc
        }, ...this.roleList]
        this.$message({
          type:'success',
          message:res.meta.msg
        })
        this.addRoleDialogVisable = false
        this.$refs.addRoleFormRef.resetFields()
      } catch (err) {
        console.log(err);
      }
    },
   
    // 修改角色
    handleRoleEdit(role){
      this.editRoleDialogVisable = true
      this.editRoleForm = {...role,children:undefined}
    },
    async confirmRoleEdit(){
      try {
        const {roleName,roleDesc} = this.editRoleForm
        const res = await updateRole(this.editRoleForm.id, {roleName,roleDesc})
        this.$message({
          type:'success',
          message:res.meta.msg
        })
        this.editRoleDialogVisable = false
        this.$refs.editRoleFormRef.resetFields()
        this.getRoleList()
      } catch (err) {
        console.log(err);
      }
    },
    // 删除角色
    handleRoleDelete(id){
      this.$confirm('此操作将永久删除该角色信息, 是否继续?','删除角色',{
        type:'warning',
        cancelButtonText:'取消',
        confirmButtonText:'确定'
      }).then(async ()=>{
        try {
          const res = await deleteRole(id)
          this.$message({
            type:'success',
            message:res.meta.msg
          })
          this.getRoleList()
        } catch (err) {
          console.log(err);
        }
      }).catch(()=>{
        this.$message('取消删除角色')
      })
    },
    // 权限分配
    handleAllocRight(role){
      this.$router.push({name:'alloRights',params:role})
    }
  }
}
</script>
<style scoped>
.right-tag{
  margin: 6px 0;
  margin-right: 10px;
}
.first-border-bottom{
  border-bottom: 1px solid #ddd;
}
.first-border-bottom:first-of-type{
  border-top: 1px solid #ddd;
}
.border-bottom{
  border-bottom: 1px solid #ddd;
}
.border-bottom:last-of-type{
  border:none;
}

</style>